{% extends "base.html" %}
{% load i18n %}
{% load staticfiles %}

{% block main_content %}
    {% include "menu_bar.html" %}
    <div id="upper-content" class="home" xmlns="http://www.w3.org/1999/html">
        <div class="left">
            <div id='blue_button'>
                <a class="bold" href="">Laat je adviseren</a>
                <br>
                <a href=""> en vind de perfecte buurt voor jou >
                </a>
            </div>
            <div id="neighborhood-search">
                <form>
                    <div class="button-search"><a href=""><img src="../static/hierodaaro/img/searchbutton.png"></a>
                    </div>
                    <input name="myvalue" type="text"
                           onFocus="if(this.value=='Zoek een stad en zie welke buurten er zijn...')this.value='';"
                           value="Zoek een stad en zie welke buurten er zijn...">
                </form>
            </div>
        </div>

    </div>

    <div id="neighborhood-overview">
        <div class="tabs">
            <ul>
                <li>
                    <div class="active">
                        Populaire buurten<div id="knop-wit">></div>
                    </div>
                </li>
                <li class="central">
                    <div>
                        Bewaarde buurten<div id="knop-wit">></div>
                    </div>
                </li>
                <li>
                    <div>
                        Onze ambassadeurs<div id="knop-wit">></div>
                    </div>
                </li>
            </ul>
        </div>
        <div id="neighborhood-description">
            <p>Buurten in nederland</p>
        </div>
        <div id="photo-tiles">

            {% for tile_url in tile_urls %}
                <div id="photo-elements">
                {% if forloop.counter|divisibleby:"11" %}

                        <div id="city-block-label">
                        </div>
                        <div id="city-label"><p>Rotterdam</p></div>
                        <img class="last" src={% static tile_url %}/>
                        <br/>
                        {% else %}

                        <div id="city-label"><p>Rotterdam</p></div>
                        <div id="tags">Groen</div>
                        <img src={% static tile_url %}/>
                    <div id="photo-tiles-underscript"><p>300 Buurten <br/> 50 Ambassadeurs</p>
                    </div>

                        <div id="photo-tiles-ambassadeurs">
                            <div id="photo-ambassadeurs">
                                <img src="../static/hierodaaro/img/rianna.png">
                            </div>
                            <div id="rating">
                                <img src="../static/hierodaaro/img/ster.png">
                            </div>
                        <div id="Bekijk_link">
                            <a href="">Bekijk Buurten</a><div id="knop-groen">></div>
                            </div>
                        </div>
                    </div>
                {% endif %}
            {% endfor %}
        </div>
    </div>
    <div id="ik-ben-hiero"><img src="../static/hierodaaro/img/slogan.jpg"><a href="">laat je adviseren<div id="knop-wit">></div></a> </div>
{% endblock %}
